<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 120px;
            background-color: #99ff99;
            padding: 10px;
            border:1px solid red;
        }
        #box2{
            padding: 50px;
            background-color: #bfa;
        }
        #box4{
            width: 200px;
            height: 300px;
            background-color: #F56600;
            overflow: auto;
        }
        #box5{
            width: 450px;
            height: 600px;
            background-color: yellow;

        }
    </style>
    <script>
     window.onload=function () {
         var box1=document.getElementById("box1");
         var btn01=document.getElementById("btn01");
         var box4=document.getElementById("box4");
         btn01.onclick=function () {
            // alert(box1.clientWidth);//返回值120但是不带px 可以直接进行计算
            //  alert(box1.clientHeight);//返回140
            //  alert(box1.offsetWidth);//返回122
            //  alert(box1.offsetHeight);//返回142
             var op=box1.offsetParent;
            // alert(op.id);//返回box2
            //  alert(box1.offsetLeft);//返回50px
            //  alert(box4.clientHeight);//返回300
            //  alert(box4.scrollHeight);//返回600
            //  alert(box4.scrollWidth);//返回450
            //  alert(box4.scrollLeft);
            //  alert(box4.scrollTop);
             //当满足box4.scrollHeight-box4.scrollTop==box4.clientHeight 说明垂直滚动条滚动到底了
             alert(box4.scrollHeight-box4.scrollTop);
        }
     };

    </script>
</head>
<body>
<script>
    /*1.clientWidth和clientHeight 这2个属性可以获取元素的可见宽度和高度
    *       clientWidth返回一个数字 可以进行计算 会获取元素的高度和宽度，包括内容区和内边距 不包含边框
    *       都是只读的 不能修改 只能通过style修改
    *2.offsetWidth和offsetHeight 可以好获得元素的整体的宽度和高度 包含内容区，内边距 边框
    *3.offsetParent可以获取当前元素的定位父元素 会获取到当前元素开启了定位的祖先元素 如果所有的祖先元素没有开启定位 返回body
    *4.offsetLeft 当前元素相对于其定位元素的水平偏移量
    *  offsetTop 当前元素相对于其定位元素的垂直偏移量
    *5.scrollHeight可以获取元素整个滚动区域的高度
    *  scrollWidth.........................宽度
    *  scrollLeft 可以获取水平滚动条的水平距离
    *  scrollTop........垂直.......垂直..
    * */
</script>
<button id="btn01">点我有惊喜</button>
<br/>
<br/>
<div id="box4">
    <div id="box5"></div>
</div>
<br/>
<br/>
<div id="box3">
    <div id="box2" style="position: relative">
        <div id="box1" style="position:relative;"></div>
    </div>
</div>
</body>
</html>